<template>
    <div class="error-container">
      <el-card class="error-card">
        <div class="error-content">
          <div class="error-icon">
            <el-icon color="#E6A23C" :size="100"><CloseBold /></el-icon>
          </div>
          <h1 class="error-code">500</h1>
          <h2 class="error-message">服务器发生错误</h2>
          <p class="error-description">服务器暂时无法处理您的请求，请稍后再试</p>
          <div class="action-buttons">
            <el-button type="primary" @click="goHome">返回首页</el-button>
            <el-button @click="refreshPage">刷新页面</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { CloseBold } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const goHome = () => {
    router.push('/dashboard')
  }
  
  const refreshPage = () => {
    window.location.reload()
  }
  </script>
  
  <style scoped>
  /* 复用相同样式 */
  .error-code {
    color: #E6A23C;
  }
  </style>